<template>
  <div>
    <el-row>
      <el-col :span="24">
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item>
            <el-input
              size="medium"
              v-model="foodName"
              placeholder="查询"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              size="small"
              type="primary"
              @click="getRecord()"
              icon="el-icon-search"
              >查询</el-button
            >
          </el-form-item>
          <el-form-item>
            <el-button
              size="small"
              @click="newest(1)"
              type="primary"
              icon="el-icon-circle-plus-outline"
              >新增</el-button
            >
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="24">
        <div>
          <el-table
            :data="tableData"
            border
            v-loading="loadFlag"
            style="width: 100%"
          >
            <el-table-column prop="productNumber" label="商品编号" width="">
            </el-table-column>

            <el-table-column prop="productName" label="商品名称" width="">
            </el-table-column>
            <el-table-column prop="productBarcode" label="商品条码" width="">
            </el-table-column>
            <el-table-column prop="productSpecifications" label="规格型号">
            </el-table-column>
            <el-table-column prop="productCategory" label="商品类别">
            </el-table-column>
            <el-table-column prop="warehouseId" label="首选仓库">
            </el-table-column>
            <el-table-column prop="unit" label="单位"> </el-table-column>
            <el-table-column prop="unitPrice" label="单价"> </el-table-column>
            <el-table-column prop="physicalInventory" label="当前库存">
            </el-table-column>
            <el-table-column prop="file" label="图片"> </el-table-column>
            <el-table-column prop="remarks" label="备注"> </el-table-column>

            <el-table-column label="操作" width="320" align="center">
              <template #default="scope">
                <el-button
                  size="mini"
                  type="primary"
                  @click="editorPara(scope.row, 2)"
                  >编辑</el-button
                >
                <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页 -->
          <div class="pagingClass">
            <el-pagination
              :page-sizes="m_page.sizes"
              :page-size="m_page.size"
              :current-page="m_page.number"
              @size-change="m_handleSizeChange"
              @current-change="m_handlePageChange"
              layout="total,sizes,prev, pager, next"
              background
              :total="m_page.totalElements"
            ></el-pagination>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-dialog
      title="基础信息"
      v-model="plassets"
      width="35%"
      :close-on-click-modal="false"
    >
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="商品编号">
          <el-input style="width: 300px" v-model="form.nserialnos"></el-input>
        </el-form-item>
        <el-form-item label="商品名称">
          <el-input style="width: 300px" v-model="form.nameless"></el-input>
        </el-form-item>
        <el-form-item label="商品条码">
          <el-input style="width: 300px" v-model="form.barcodes"></el-input>
        </el-form-item>
        <el-form-item label="规格型号">
          <el-input
            style="width: 300px"
            v-model="form.specifications"
          ></el-input>
        </el-form-item>
        <el-form-item label="商品类别">
          <el-input style="width: 300px" v-model="form.category"></el-input>
        </el-form-item>
        <el-form-item label="首选仓库">
          <el-select
            style="width: 300px"
            v-model="form.filename"
            clearable
            placeholder="请选择"
          >
            <el-option
              v-for="item in wname"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="单位">
          <el-select
            style="width: 300px"
            v-model="form.funit"
            clearable
            placeholder="请选择"
          >
            <el-option
              v-for="item in baseUnits"
              :key="item.value"
              :label="item.label"
              :value="item.label + ''"
            >
            </el-option>
          </el-select>
          <el-button
            type="primary"
            icon="el-icon-plus"
            circle
            @click="ounces()"
          ></el-button>
        </el-form-item>
        <el-form-item label="单价">
          <el-input
            type="number"
            style="width: 300px"
            v-model.number="form.unitario"
          ></el-input>
        </el-form-item>
        <el-form-item label="图片"> </el-form-item>
        <el-form-item label="备注">
          <el-input
            type="textarea"
            :rows="2"
            v-model="form.newnotes"
            placeholder="备注"
          ></el-input>
        </el-form-item>

        <el-form-item label="附近上传">
          <el-upload
            class="upload-demo"
            action="https://jsonplaceholder.typicode.com/posts/"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            multiple
            :limit="3"
            :file-list="fileList"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <template #tip>
              <div class="el-upload__tip">
                只能上传 jpg/png 文件，且不超过 500kb
              </div>
            </template>
          </el-upload>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="plassets = false">取 消</el-button>
          <el-button type="primary" v-if="under == 1" @click="determine()"
            >确 定</el-button
          >
          <el-button @click="hardware()" v-else type="primary"
            >编辑 确 定</el-button
          >
        </span>
      </template>
    </el-dialog>
    <el-dialog
      title="新增单位"
      v-model="UnitHealth"
      width="35%"
      :close-on-click-modal="false"
    >
      <el-form ref="newly" :inline="true" :model="newly" label-width="80px">
        <el-form-item label="单位">
          <el-input v-model="newly.known"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="UnitHealth = false">取 消</el-button>
          <el-button type="primary" @click="logout()">确 定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loadFlag: false, //加载flag
      foodName: "",
      plassets: false,
      UnitHealth: false,
      under: 1,
      fileList: [],
      wname: [],
      form: {
        nserialnos: "", //商品编号
        nameless: "", //商品名称
        barcodes: "", //商品编码
        specifications: "", //规格型号
        category: "", //商品类别
        filename: "",
        funit: "", //单位
        newnotes: "",
        getNam: "",
        menu_report: "",
      },
      baseUnits: [],
      newly: {
        known: "", //单位
      },
      productslisting: [],
      getManufacturers: [],
      occasion: [],
      membership: [],
      tableData: [],
      m_page: {
        sizes: [10, 20, 40, 50, 100], //每页最大显示数
        size: 10,
        totalElements: 0,
        totalPages: 3,
        number: 1,
      },
      underID: "",
      headerObj: "",
    };
  },
  created() {
    let str = sessionStorage.getItem("token");
    this.headerObj = `Bearer ${str}`;
  },
  beforeMount() {
    this.getUnits();
    this.getWarehouse();
    this.getRecord();
  },
  methods: {
    //删除
    handleDelete(row) {
      let into = row;
      console.log(into);
      this.$confirm("确认删除该设备?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$axios
            .post(
              `api/serial/ProductInformation`,
              {
                id: into.id,
                productNumber: into.productNumber, //商品编号
                productName: into.productName, //商品名称
                productBarcode: into.productBarcode, //商品编码
                productSpecifications: into.productSpecifications, //商品型号
                productCategory: into.productCategory, //商品类别
                warehouseId: into.warehouseId, //仓库ID
                unit: into.unit, //单位
                unitPrice: into.unitPrice, ///单价
                remarks: into.remarks, //备注
                file: into.file, //图片上传
                isDelete: 1,
              },
              {
                headers: {
                  Authorization: this.headerObj,
                },
              }
            )
            .then(() => {
              this.getRecord();
              this.$message.success("删除成功");
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //编辑
    hardware() {
      this.$axios
        .post(
          `api/serial/ProductInformation`,
          {
            id: this.underID,
            productNumber: this.form.nserialnos, //商品编号
            productName: this.form.nameless, //商品名称
            productBarcode: this.form.barcodes, //商品编码
            productSpecifications: this.form.specifications, //商品型号
            productCategory: this.form.category, //商品类别
            warehouseId: this.form.filename, //仓库ID
            unit: this.form.funit, //单位
            unitPrice: this.form.unitario, ///单价
            remarks: this.form.newnotes, //备注
            file: "", //图片上传
          },
          {
            headers: {
              Authorization: this.headerObj,
            },
          }
        )
        .then(() => {
          this.$message({
            message: "编辑成功",
            type: "success",
          });
          this.getRecord();
          this.plassets = false;
        })
        .catch(() => {
          this.$message.error("编辑失败");
        });
    },
    editorPara(row, index) {
      this.under = index;
      this.underID = row.id;
      this.plassets = true;
      this.form.nserialnos = row.productNumber;
      this.form.nameless = row.productName;
      this.form.barcodes = row.productBarcode;
      this.form.specifications = row.productSpecifications;
      this.form.category = row.productCategory;
      this.form.filename = row.warehouseId;
      this.form.funit = row.unit;
      this.form.unitario = row.unitPrice;
      this.form.newnotes = row.remarks;
      //file: "", //图片上传
    },

    //新增
    determine() {
      this.$axios
        .post(
          `api/serial/ProductInformation`,
          {
            // id: 0,
            productNumber: this.form.nserialnos, //商品编号
            productName: this.form.nameless, //商品名称
            productBarcode: this.form.barcodes, //商品编码
            productSpecifications: this.form.specifications, //商品型号
            productCategory: this.form.category, //商品类别
            warehouseId: this.form.filename, //仓库ID
            unit: this.form.funit, //单位
            unitPrice: this.form.unitario, ///单价
            remarks: this.form.newnotes, //备注
            file: "", //图片上传
          },
          {
            headers: {
              Authorization: this.headerObj,
            },
          }
        )
        .then(() => {
          this.$message({
            message: "保存成功",
            type: "success",
          });
          this.getRecord();
          this.plassets = false;
        })
        .catch(() => {
          this.$message.error("保存失败");
        });
    },
    logout() {
      this.$axios
        .post(
          `api/serial/Dictionaries`,
          {
            text: this.newly.known,
            value: this.newly.known,
            type: 5,
          },
          {
            headers: {
              Authorization: this.headerObj,
            },
          }
        )
        .then(() => {
          // console.log(res);
          this.$message({
            message: "新增成功",
            type: "success",
          });
          this.UnitHealth = false;
          this.getUnits();
        });
    },
    //获取数据
    getRecord() {
      this.loadFlag = true;
      this.$axios({
        methods: "GET",
        url: "api/serial/ProductInformation",
        headers: {
          Authorization: this.headerObj,
        },
        params: {
          pageSize: this.m_page.size,
          pageIndex: this.m_page.number,
          stockType: 3,
          query: {
            productName: this.foodName,
          },
        },
      }).then((res) => {
        console.log(res);
        ({ data: this.tableData, count: this.m_page.totalElements } = res.data);
        // this.tableData.forEach((item) => {
        //   item.startDate = dayjs(item.startDate).format("YYYY-M-D");
        // });
        this.loadFlag = false;
      });
    },
    notEmpty() {
      this.underID = "";
      this.form.nserialnos = "";
      this.form.nameless = "";
      this.form.barcodes = "";
      this.form.specifications = "";
      this.form.category = "";
      this.form.filename = "";
      this.form.funit = "";
      this.form.unitario = "";
      this.form.newnotes = "";
      //file: "", //图片上传
    },
    newest(index) {
      this.under = index;
      this.plassets = true;
      this.notEmpty();
    },
    //单位新增
    ounces() {
      this.UnitHealth = true;
    },
    //获取
    getUnits() {
      this.$axios({
        methods: "GET",
        url: "api/serial/Dictionaries",
        headers: {
          Authorization: this.headerObj,
        },
        params: {
          pageSize: 200,
          pageIndex: 1,
          query: {
            type: 5,
          },
        },
      }).then((res) => {
        // console.log(res);
        let unitslefta = res.data.data;
        console.log(unitslefta);
        unitslefta.forEach((item, index) => {
          this.baseUnits[index] = {
            value: item.id,
            label: item.text,
          };
        });
        console.log(this.baseUnits);
      });
    },
    //获取仓库
    getWarehouse() {
      this.$axios({
        methods: "GET",
        url: "api/serial/WareHouse",
        headers: {
          Authorization: this.headerObj,
        },
        params: {
          pageSize: 1000,
          pageIndex: 1,
          query: {},
        },
      }).then((res) => {
        let item_name = res.data.data;
        console.log(item_name);
        item_name.forEach((item, index) => {
          this.wname[index] = {
            value: item.id,
            label: item.warehouseName,
          };
        });
      });
    },
    //页码
    m_handlePageChange(currPage) {
      this.m_page.number = currPage;
      this.getRecord();
    },
    m_handleSizeChange(currSize) {
      this.m_page.size = currSize;
      this.getRecord();
    },

    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
  },
};
</script>

<style scoped>
.addccc {
  margin-bottom: 20px;
}
</style>